<template>
    <div class="main">
        <div>
            账户信息
        </div>
        <div>
            <div>
                <el-avatar :size="80" :src="uploadPicture(this.userInfo.avatar)"></el-avatar>
            </div>
            <div>{{userInfo.userName}}</div>
        </div>
        <div>
            <div>
                <div>信息列表</div>
                <div>
                    <!-- <el-button round>圆角按钮</el-button> -->
                    <el-button  icon="el-icon-edit" circle @click="centerDialogVisible = true"></el-button>
                    <!-- 弹出框 -->
                    <el-dialog title="修改个人信息" :visible.sync="centerDialogVisible" width="30%" center>
                        <div id = "my_dialog">
                            <div class="my_upload">
                                <div>
                                    <el-avatar :size="80" :src="uploadPicture(this.userInfo.avatar)"></el-avatar>
                                </div>
                                <div>
                                    <!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
                                        :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList"> -->
                                    <el-upload action="#"
                                    :multiple="false" 
                                    :show-file-list="true" 
                                    :http-request="uploadHttpRequest" 
                                    :file-list="fileList" 
                                    :on-change="handleUploadChange"
                                    :before-upload="beforeUpload">
                                        <el-button size="small" >点击上传</el-button> 
                                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                    </el-upload>
                                </div>
                            </div>
                            <el-form ref="form" :model="userInfo" label-width="80px">
                                <el-form-item label="昵称">
                                    <el-input v-model="userInfo.userName"></el-input>
                                </el-form-item>
                                <el-form-item label="手机号">
                                    <el-input v-model="userInfo.phone"></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱">
                                    <el-input v-model="userInfo.email" disabled="true"></el-input>
                                </el-form-item>
                                <el-form-item label="性别">
                                    <el-select v-model="userInfo.userType" placeholder="请选择性别">
                                    <el-option label="男" value="1"></el-option>
                                    <el-option label="女" value="0"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="签名">
                                    <el-input v-model="userInfo.remark"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="updateUserInfo() ; centerDialogVisible = false ;">修 改</el-button>
                        </span>
                    </el-dialog>
                </div>
            </div>
            <el-descriptions :column="1" border>
                <el-descriptions-item label="昵称">{{this.userInfo.userName}}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{this.userInfo.email}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{this.userInfo.phone}}</el-descriptions-item>
                <el-descriptions-item label="性别">{{this.userInfo.userType == 1 ? '男' : '女'}}</el-descriptions-item>
                <el-descriptions-item label="主页默认源"><el-tag>{{this.userInfo.spiderId}}</el-tag></el-descriptions-item>
                <el-descriptions-item label="签名">{{this.userInfo.remark}}</el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>

<script>
import LogoSrc from '@/assets/icon/comic.png'
import Api from '@/api/index';

export default {
  name: 'Profile',
  data () {
    return {
        logo: LogoSrc,
        centerDialogVisible: false,
        //基本信息
        base:{
            userId: this.$store.state.common.userId,
            avatar: this.$store.state.common.avatar, 
        },
        //用户信息
        userInfo: {
            avatar: "",
            email: "",
            id: 0,
            phone: "",
            remark: "",
            userName: "",
            userType: 0
        },
        //上传文件列表
        fileList: [],
    }
  },
  methods: {
      /** 加载头像 */
      uploadPicture(url){
         return url == '' || url == undefined | url == null ? '' : Api.FILEROOT + url
      },
      /** 修改用户信息 */
      updateUserInfo(){
        //   console.log("asdfasdfasdfasdfasdfasdfasdfasdfasdf");
          Api.getUserSaveOrUpdateResource(this.userInfo).then(response => {
               if(response.data.code == 200){
                    this.$notify({
                        title: '提示',
                        message: "修改成功",
                        position: 'bottom-left',
                        type: 'success'
                    });
                    this.$router.go(0)
                    this.$store.commit('common/update_username',this.userInfo.userName);
                    this.$store.commit('common/update_avatar',this.userInfo.avatar);
               }
          },error => {
            //获取搜索内容
            this.$notify({
                  title: '提示',
                  message: '修改失败',
                  position: 'bottom-left',
                  type: 'error'
              });
        })
      },
      //上传方法
      beforeUpload(file) {
        const fileType = file.name.substring(file.name.lastIndexOf('.'))
        if (fileType.toLowerCase() != '.jpg' && fileType.toLowerCase() != '.png') {
            this.$message.error('文件必须为.jpg或.png类型')
            this.fileList = []
            return false
        }
      },
      // 覆盖element的默认上传文件
      uploadHttpRequest(data) {
        Api.getMinioControllerUploadResource(data).then(response => {
            if(response.data.code == 200){
                this.userInfo.avatar = response.data.data
            }
        })
      },
      // 限制文件上传的个数只有一个，获取上传列表的最后一个
      handleUploadChange(file, fileList) {
            if (fileList.length > 0) {
                this.fileList = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的文件
            }
      },
},
  mounted() {
    //初始化界面,获取登录用户信息
    Api.getUserGetDataResource(this.base.userId).then(response => {
          this.userInfo = response.data.data
    })
  }
}
</script>

<style scoped>
.main{
    display: flex;
    flex-direction: column;
    /* justify-content: flex-start; */
    align-items: flex-start;
}
.el-avatar{
    box-shadow: 0px 0px 5px 1px rgb(223, 223, 223);
}
.main > div:nth-child(1){
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6em;
    margin: 0px 0px 30px 0px;
    font-weight: 1000;
}
.main > div:nth-child(2){
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: row;
    margin: 0px 0px 50px 0px;
}
.main > div:nth-child(2) > div:nth-child(2){
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.3em;
    font-weight: 800;
    margin: 15px 0px 0px 20px;
}
.main > div:nth-child(3){
    width: 100%;
    height: 80%;
}
.main > div:nth-child(3) > div:nth-child(2){
    margin: 20px 0px 0px 0px;
}
.main > div:nth-child(3) > div:nth-child(1){
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.main > div:nth-child(3) > div:nth-child(1) > div:nth-child(1){
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.3em;
    font-weight: 800;
    margin: 0px 0px 0px 0px;
}
#my_dialog {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
#my_dialog > .el-form {
    width: 100%;
}
#my_dialog > .my_upload{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
#my_dialog > .my_upload > div:first-child{
    margin-right: 50px;
} 
</style>